<!--
 * @Author: 一品网络技术有限公司
 * @Date: 2022-09-26 16:22:44
 * @LastEditTime: 2024-03-30 10:30:15
 * @FilePath: \client\src\pages\order\view.vue
 * @Description:
 * 联系QQ:58055648
 * Copyright (c) 2022 by 东海县一品网络技术有限公司, All Rights Reserved.
-->
<template>
	<yplayout v-if="isLoad">
		<template #header="props">
			<div class="flex items-center">
				<i class="ri-2x text-gray-500 ml-2" :class="props.meta.icon || 'ri-information-line'"></i>
				<div class="text-xl px-2" v-html="props.meta.title"></div>
			</div>
		</template>
		<template #list>
			<div class="flex pl-5 text-sm text-slate-500">
				<div
					:class="[
						'mx-3',
						'pb-1',
						'border-blue-600',
						'cursor-pointer',
						{ 'text-blue-600 border-b': currentTab === index }
					]"
					v-for="(item, index) in tabsData"
					:key="index"
					@click="currentTab = index"
				>
					{{ item }}
				</div>
			</div>
			<div class="text-sm p-5">
				<div class="grid grid-cols-3 gap-x-5 gap-y-3 border p-3 rounded-md">
					<template v-if="currentTab === 0">
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">所属企业：</div>
							<div class="text-base">{{ r.orderCompany.name }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">金额：</div>
							<div class="text-base">{{ r.money }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">备注：</div>
							<div class="text-base">{{ r.intro }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">审核状态：</div>
							<div :class="['text-base', r.status === -1 ? 'text-red-500' : 'text-green-500']">
								{{ r.status_text }}
							</div>
						</div>
						<div v-if="r.status === -1" class="flex items-center">
							<div class="w-32 text-right text-hui-200">拒绝理由：</div>
							<div class="text-base">{{ r.refuse }}</div>
						</div>
					</template>
					<template v-else-if="currentTab === 1">
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">企业名称：</div>
							<div class="text-base">{{ r.company.name }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">法人：</div>
							<div class="text-base">{{ r.company.legal }}</div>
						</div>
						<div class="row-span-5">
							<div class="space-y-2 flex flex-col items-center">
								<img
									class="w-32 min-h-[90px]"
									:class="r.company.thumbFile ? 'cursor-pointer' : ''"
									:src="r.company.thumbFile"
									@click="r.company.thumbFile ? imgPreview([r.company.thumbFile]) : ''"
								/>
								<p class="text-hui-200">营业执照</p>
							</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">联系人：</div>
							<div class="text-base">{{ r.company.contact }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">联系电话：</div>
							<div class="text-base">{{ r.company.phone }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">备注：</div>
							<div class="text-base">{{ r.company.intro }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">截止日期：</div>
							<div class="text-base">{{ r.company.endtime }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">公司地址：</div>
							<div class="text-base">{{ r.company.areaName }}{{ r.company.address }}</div>
						</div>
						<div class="flex items-center">
							<div class="w-32 text-right text-hui-200">店铺总数：</div>
							<div class="text-base">{{ r.company.totalstores }}</div>
						</div>
					</template>
				</div>
			</div>
			<div class="flex justify-center py-3 space-x-2">
				<button class="btn" type="button" @click="router.push('list')">
					<i class="ri-arrow-go-back-line ri-lg pr-1"></i>
					返回
				</button>
			</div>
		</template>
	</yplayout>
</template>
<script setup>
	import { useRoute, useRouter } from 'vue-router'
	import { onMounted, ref, reactive } from 'vue'
	import { getData } from '@/common/base'
	import { imgPreview } from '@/components/utils'
	const route = useRoute()
	const router = useRouter()
	const id = route.query
	const currentTab = ref(0)
	const tabsData = ['基本信息', '企业信息']
	const isLoad = ref(false)
	const r = reactive({})
	onMounted(() => {
		if (id) {
			read()
		}
	})
	const read = async () => {
		const resp = await getData('order/read', id)
		if (resp.code == 1) {
			const orderData = resp.data
			Object.keys(orderData).map((k) => {
				if (orderData[k]) r[k] = orderData[k]
			})
			isLoad.value = true
		}
	}
</script>
